import React, { Component } from "react";
import { Toast } from "antd-mobile";
import "./SearchCenter.scss";
import axios from "../../utils/myaxios";
import { withRouter } from "react-router-dom";

class SearchCenter extends Component {
  state = {
    searchVal: "",
    hotList: [],
    productList: [],
  };
  //搜索框输入
  handleSearchValChange = (e) => {
    this.setState({
      searchVal: e.target.value,
    });
    // 搜索框请求
    axios
      .get(
        "/h5ajax.php?action=suggest&sid=52707142f04ca2bb9a7251cd17ae30b9&fun_type=2&callback=that.updateList&key=" +
          e.target.value
      )
      .then((res) => {
        let str = JSON.parse(
          res.replace("that.updateList(", "").replace(")", "")
        );
        if (!str.word && this.state.searchVal !== "") {
          Toast.info("暂无数据", 1);
        }
        this.setState({
          productList: str.word,
        });
      });
  };
  //删除按钮
  handleRemBtn = (params) => {
    this.setState({
      searchVal: "",
      productList: [],
    });
  };
  // 搜索点击跳转
  handlesosuoClick = (params) => {
    // 如果为空
    if (this.state.searchVal) {
      this.props.history.push("/searchres/" + this.state.searchVal);
    } else {
      Toast.info("输入不能为空", 1);
    }
  };
  // 根据点击跳转页面
  handleItemClick = (e) => {
    let good_name = e.target.getAttribute("data-name");
    this.props.history.push("/searchres/" + good_name);
  };
  //热门点击
  handleRemenClick = (text) => {
    //搜索结果
    this.props.history.push("/searchres/" + text);
  };
  componentDidMount() {
    // 热门
    //touch.m.dangdang.com/h5ajax.php?action=hotword
    document.title = "搜索中心-当当触屏版";
    axios.get("/h5ajax.php?action=hotword").then((res) => {
      this.setState({
        hotList: res || [],
      });
    });

    // 如果是从搜索列表页点进
    if (this.props.location.state !== undefined) {
      this.setState(
        {
          searchVal: this.props.location.state.searchname,
        },
        function () {
          axios
            .get(
              "/h5ajax.php?action=suggest&sid=52707142f04ca2bb9a7251cd17ae30b9&fun_type=2&callback=that.updateList&key=" +
                this.state.searchVal
            )
            .then((res) => {
              let str = JSON.parse(
                res.replace("that.updateList(", "").replace(")", "")
              );
              if (!str.word && this.state.searchVal !== "") {
                Toast.info("暂无数据", 1);
              }
              this.setState({
                productList: str.word,
              });
            });
        }
      );
    }
    this.input.focus();
  }
  render() {
    return (
      <div className="ddw-sc">
        {/* 搜索中心输入框开始 */}
        <div className="sc-nav">
          <div className="nav-back">
            <i
              className="iconfont icon-fanhui"
              onClick={() => window.history.go(-1)}
            ></i>
          </div>
          <div className="nav-input">
            <i className="iconfont icon-sousuo"></i>
            <input
              ref={(input) => {
                this.input = input;
              }}
              value={this.state.searchVal}
              onChange={this.handleSearchValChange}
              type="search"
              placeholder="搜索商品/店铺/种类"
            />
            <i
              onClick={this.handleRemBtn}
              className={
                this.state.searchVal
                  ? "iconfont icon-delete2 active"
                  : "iconfont icon-delete2"
              }
            ></i>
          </div>
          <div className="nav-search-btn">
            <span onClick={this.handlesosuoClick}>搜索</span>
          </div>
        </div>
        {/* 搜索中心输入框结束 */}
        {/* 热门搜索开始 */}
        <div className="sc-remeng">
          <h4>
            <i className="iconfont icon-remen"></i>
            <span>热门搜索</span>
          </h4>
          <div className="remeng">
            {this.state.hotList &&
              this.state.hotList.map((v) => {
                return (
                  <span
                    key={v.hot_word}
                    onClick={this.handleRemenClick.bind(this, v.hot_word)}
                  >
                    {v.hot_word}
                  </span>
                );
              })}
          </div>
        </div>
        {/* 热门搜索结束 */}
        {/* 产品列表开始 */}
        <div className="sc-list" onClick={this.handleItemClick}>
          {this.state.productList &&
            this.state.productList.map((v) => {
              return (
                <div data-name={v.key} key={v.key} className="sc-list-item">
                  <span data-name={v.key}>{v.key}</span>
                  <span data-name={v.key}>约{v.count}个结果</span>
                </div>
              );
            })}
        </div>
        {/* 产品列表结束 */}
      </div>
    );
  }
}

export default withRouter(SearchCenter);
